<script setup>
import { ref } from 'vue'
import Sidebar from '../components/Sidebar/Sidebar.vue'

// 基础示例状态
const isBasicOpen = ref(false)

// 响应式示例状态
const isResponsiveOpen = ref(false)

// 自定义主题示例状态
const isCustomOpen = ref(false)

// 处理菜单点击
const handleMenuClick = () => {
  console.log('Menu item clicked')
}
</script>

<template>
  <div class="sidebar-demo">
    <!-- 基础示例 -->
    <section class="demo-section">
      <h3>基础示例</h3>
      <button @click="isBasicOpen = true">打开左侧边栏</button>
      <Sidebar v-model="isBasicOpen">
        <template #header>
          <h3>基础侧边栏</h3>
        </template>

        <div class="menu-items">
          <div class="menu-item" @click="handleMenuClick">菜单项 1</div>
          <div class="menu-item" @click="handleMenuClick">菜单项 2</div>
          <div class="menu-item" @click="handleMenuClick">菜单项 3</div>
        </div>
      </Sidebar>
    </section>

    <!-- 响应式示例 -->
    <section class="demo-section">
      <h3>响应式示例</h3>
      <button @click="isResponsiveOpen = true">打开右侧边栏</button>
      <Sidebar
          v-model="isResponsiveOpen"
          position="right"
          :responsive="true"
          :breakpoint="768"
          animationType="fade"
      >
        <template #header>
          <h3>响应式侧边栏</h3>
        </template>

        <div class="responsive-content">
          <p>在小屏幕下自动折叠</p>
          <button @click="isResponsiveOpen = false">关闭</button>
        </div>
      </Sidebar>
    </section>

    <!-- 自定义主题示例 -->
    <section class="demo-section">
      <h3>自定义主题示例</h3>
      <button @click="isCustomOpen = true">打开自定义侧边栏</button>
      <Sidebar
          v-model="isCustomOpen"
          width="400px"
          :overlay-opacity="0.7"
          :animation-duration="500"
      >
        <template #header>
          <div class="custom-header">
            <h3>自定义主题</h3>
            <button @click="isCustomOpen = false">×</button>
          </div>
        </template>

        <div class="custom-content">
          <p>自定义宽度和动画效果</p>
          <div class="custom-menu">
            <div class="custom-menu-item">设置</div>
            <div class="custom-menu-item">个人信息</div>
            <div class="custom-menu-item">退出</div>
          </div>
        </div>
      </Sidebar>
    </section>
  </div>
</template>

<style scoped>
.sidebar-demo {
  padding: 20px;
}

.demo-section {
  margin-bottom: 30px;
}

button {
  padding: 8px 16px;
  margin: 10px 0;
  border: none;
  border-radius: 4px;
  background: #409EFF;
  color: white;
  cursor: pointer;
}

.menu-items {
  padding: 10px;
}

.menu-item {
  padding: 10px;
  cursor: pointer;
}

.menu-item:hover {
  background: #f5f7fa;
}

.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.custom-content {
  padding: 20px;
}

.custom-menu-item {
  padding: 12px;
  margin: 8px 0;
  background: #f5f7fa;
  border-radius: 4px;
  cursor: pointer;
}

.custom-menu-item:hover {
  background: #e4e7ed;
}
</style>